<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="UTF-8">
    <title>后台管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="../../css/font.css">
    <link rel="stylesheet" href="../../css/xadmin.css">
    <script type="text/javascript" src="../../js/jquery-3.2.1.js"></script>
    <script type="text/javascript" src="../../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../../js/xadmin.js"></script>
  </head>
  
  <body>
	<div class="x-body">
		<form class="layui-form" lay-filter="Textform">
			<h2 align="center">游客停车收费规则设置</h2></br>
			<div class="layui-form-item">
				<span id="textRuleShow">当前规则: </span>			
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">规则选择:</label>
				<div class="layui-input-block" id = "view">
					<select id="guestParking" name="guestParking" lay-filter="chooseguestParking">
						<option value="1">起步时段固定收费，超出时段按时间收费</option>
						<option value="2">起步时段按时收费，超出时段则收取罚款</option>
						<option value="3">起步时段按时收费，超出时段则固定一个费用</option>
						<option value="4">阶梯固定费用</option>
						<option value="5">固定收费</option>
	  				</select>
				</div>
			</div>
			<div style="height:1px;border-top:solid rgb(0,0,0) 3px;"></div>
			
			<div class="layui-form-item" id="guestParkingRule" style="width:500px; height:300px; position: relative; left:60px;">

			</div>
			
			<div class="layui-form-item">
				<label for="L_repass" class="layui-form-label"> </label>
				<button class="layui-btn" lay-filter="add" lay-submit="">
					保存设置</button>
			</div>
		</form>
	</div>
	<script>
	layui.use(['form','layer'], function(){
        var form = layui.form
        ,layer = layui.layer;
        
        
        //初始化
        $(function(){
        	//默认展示第一个规则
        	changeRule(1);
        	
        	
        	//发送异步请求查询初值
        	
        	
        	
        	/*success:   
        		var text ="";
        		if(result.rule == 1){
        			text = "当前规则:XXXXXXXXXX"+result.param1+"XXXXX"+result.param2+"XXX";
        		}			
        		...
        	*/
        });
        
        
        //监听小区选择菜单的值,生成二级下拉菜单
        form.on('select(chooseguestParking)',function(data){
        	
        	changeRule(data.value);
        });
        

        //监听提交
        form.on('submit(add)', function(data){
        
        	
        	//发异步请求提交，修改计费规则
       		
        	return false;
        });
        
        
        
        function changeRule(value){
        	if(value=='1'){
				rule = "<label class='layui-table'>停车时间少于(单位:分钟)</label>"+
					   "<input type='text' class='layui-input' id='gpParam1'>"+
					   "<label class='layui-table'>时,收取费用(单位:元)</label>"+
					   "<input type='text' class='layui-input' id='gpParam2'>"+
					   "<label class='layui-table'>超出的时间每(单位:分钟)</label>"+
					   "<input type='text' class='layui-input' id='gpParam4'>"+
					   "<label class='layui-table'>收取(单位:元)</label>"+
					   "<input type='text' class='layui-input' id='gpParam3'>"+
					   "<label class='layui-table'>的费用";
				$("#guestParkingRule").html(rule);
			}
			if(value=='2'){
				rule = "<label class='layui-table'>停车每(单位:)</label>"+
					   "<input type='text' class='layui-input' id='gpParam3'>"+
					   "<label class='layui-table'>时收取(单位:)</label>"+
					   "<input type='text' class='layui-input' id='gpParam2'>"+
					   "<label class='layui-table'>的费用，超过(单位:)</label>"+
					   "<input type='text' class='layui-input' id='gpParam1'>"+
					   "<label class='layui-table'>时则额外交(单位:)</label>"+
					   "<input type='text' class='layui-input' id='gpParam4'>"+
					   "<label class='layui-table'>的罚款费用</label>";
				$("#guestParkingRule").html(rule);
			}
			if(value=='3'){
				rule = "<label class='layui-table'>停车每(单位:)</label>"+
				"<input type='text' class='layui-input' id='gpParam3'>"+
				"<label class='layui-table'>时收取(单位:)</label>"+
				"<input type='text' class='layui-input' id='gpParam2'>"+
				"<label class='layui-table'>的费用，超过(单位:)</label>"+
				"<input type='text' class='layui-input' id='gpParam1'>"+
				"<label class='layui-table'>时则固定费用(单位:)</label>"+
				"<input type='text' class='layui-input' id='gpParam4'>";
				$("#guestParkingRule").html(rule);
			}
			if(value=='4'){
				rule = "<label class='layui-table'>停车时间少于(单位:)</label>"+
				"<input type='text' class='layui-input' id='gpParam1'>"+
				"<label class='layui-table'>时收取(单位:)</label>"+
				"<input type='text' class='layui-input' id='gpParam2'>"+
				"<label class='layui-table'>费用，少于(单位:)</label>"+
				"<input type='text' class='layui-input' id='gpParam3'>"+
				"<label class='layui-table'>时收取(单位:)</label>"+
				"<input type='text' class='layui-input' id='gpParam4'>"+
				"<label class='layui-table'>费用，超出上述时间则收取(单位:)</label>"+
				"<input type='text' class='layui-input' id='gpParam5'>"+
				"<label class='layui-table'>费用</label>";
				$("#guestParkingRule").html(rule);
			}
			if(value=='5'){
				rule = "<label class='layui-table'>每辆车收取固定费用(单位:元)</label>"+
					   "<input type='text' class='layui-input' id='gpParam1'>";
				$("#guestParkingRule").html(rule);
			}
        	
        	//这绝对是layui的第一大坑
        	form.render();
        }
        
	});
	</script>

  </body>

</html>